/**
* 图表界面
*/ 
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据可视化</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索，切换 -->
    <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
          <el-row :gutter="23">
            <el-col :span="7">
              <el-input
                size="small"
                v-model="machineNo"
                placeholder="请输入所属公司"
              ></el-input>
            </el-col>
            <el-col :span="7">
              <el-input
                size="small"
                v-model="machineNo"
                placeholder="请输入资产编号"
              ></el-input>
            </el-col>
            <el-col :span="7">
              <el-input
                size="small"
                v-model="machineNo"
                placeholder="请输入"
              ></el-input>
            </el-col>
            <el-col :span="3" class="stsearch">
              <el-button size="small" type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stbgc">
          <el-row>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="day">日</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="month">月</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="type" label="years">年</el-radio>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SCEchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SUMEchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="ClickEchart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <div>
      <el-row :gutter="23">
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payEchart"></div>
          </div>
        </el-col>
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payNumEchart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import axios from "axios";
import Chart from "echarts";
export default {
  name: "welcome",
  data() {
    return {
      machineNo: "",
      type: "day",

      //  入库数量
      SCEoption: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}",
        },
        legend: {
          data: [
            {
              name: "入库数量（总数）",
              icon: "rect",
            },
          ],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232",
          },
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1,
        },
        xAxis: {
          type: "category",
          // 这里先留空，后续在获取数据后填充
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
            },
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
            },
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999",
            },
          },
        },
        series: [
          {
            name: "入库数量（总数）",
            type: "bar",
            barGap: 0,
            // 这里先留空，后续在获取数据后填充
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new Chart.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#83bff6" },
                  { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#188df0" },
                ]),
              },
              emphasis: {
                color: new Chart.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
          },
        ],
      },

      //  出库数量
      SUMoption: {
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>id：{b} : {c}",
        },
        legend: {
          data: [
            {
              name: "出库数量（总数）",
              icon: "rect",
            },
          ],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232",
          },
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1,
        },
        xAxis: {
          type: "category",
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
            },
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
            },
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999",
            },
          },
        },
        series: [
          {
            name: "出库数量（总数）",
            //   type: 'bar',
            type: "line",
            barGap: 0,
            data: [],
            barWidth: 10,
            itemStyle: {
              color: "#108ff9",
            },
          },
        ],
      },
      //  总点击量
      Clickoption: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}月 : {c}",
        },
        legend: {
          data: [
            {
              name: "总点击量",
              icon: "rect",
            },
          ],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232",
          },
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1,
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
            },
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1,
            },
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999",
            },
          },
        },
        series: [
          {
            name: "总点击量",
            type: "bar",
            barGap: 0,
            data: [
              50000, 10000, 80000, 30000, 50000, 60000, 40000, 80000, 50000,
              20000, 60000, 40000,
            ],
            barWidth: 10,
            itemStyle: {
              color: "#48cefd",
            },
          },
        ],
      },

      //  出库产品前五名（扇形统计图)
      payoption: {
        backgroundColor: "#2c343c",
        title: {
          text: "出库产品前五名(数量)",
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 12,
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}",
        },
        visualMap: {
          show: false,
          min: 0,
          max: 50, // 根据实际数据范围调整
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "出库物品前五名(数量)",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [], // 这里初始为空，将在`mounted`阶段填充
            roseType: "radius",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(255, 255, 255, 0.3)",
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.3)",
                },
                smooth: 0.2,
                length: 10,
                length2: 20,
              },
            },
            itemStyle: {
              normal: {
                color: "#c23531",
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      },

      // 用户登录统计（扇形统计图)
      payNumoption: {
        backgroundColor: "#2c343c",
        title: {
          text: "用户登录统计（次数）",
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 12,
            color: "#ccc",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}",
        },
        visualMap: {
          show: false,
          min: 0,
          max: 50, // 根据实际数据范围调整
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "用户登录统计（历史登录总数）",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [],
            roseType: "radius",
            label: {
              normal: {
                textStyle: {
                  color: "rgba(255, 255, 255, 0.3)",
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.3)",
                },
                smooth: 0.2,
                length: 10,
                length2: 20,
              },
            },
            itemStyle: {
              normal: {
                // 从出库产品前五名扇形图的颜色中选择，确保一致
                color: function (params) {
                  const colorList = [
                    "#FF6347",
                    "#FF1493",
                    "#00FF7F",
                    "#FFD700",
                    "#4B0082",
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      },
    };
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() {},
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getSCE();
    this.getSUM();
    this.getClick();
    this.getpay();
    this.getpayNum();
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 入库总数
    getSCE() {
      axios
        .post("/api/Input/Inventory") // 根据实际后端接口地址修改
        .then((res) => {
          const productIds = res.data.data.map((item) => item.id);
          const inventorySums = res.data.data.map((item) => item.inventorySum);
          this.SCEoption.xAxis.data = productIds;
          this.SCEoption.series[0].data = inventorySums;
          this.chart = Chart.init(this.$refs.SCEchart);
          this.chart.setOption(this.SCEoption);
        });
    },
    // 出库总数
    getSUM() {
      axios
        .post("/api/Output/Inventory") // 根据实际后端接口地址修改
        .then((res) => {
          const productIds = res.data.data.map((item) => item.id);
          const inventoryRemove = res.data.data.map(
            (item) => item.inventoryRemove
          );
          this.SUMoption.xAxis.data = productIds;
          this.SUMoption.series[0].data = inventoryRemove;
          this.chart = Chart.init(this.$refs.SUMEchart);
          this.chart.setOption(this.SUMoption);
        });
      // this.chart = Chart.init(this.$refs.SUMEchart);
      // this.chart.setOption(this.SUMoption);
    },
    // 总点击量
    getClick() {
      this.chart = Chart.init(this.$refs.ClickEchart);
      this.chart.setOption(this.Clickoption);
    },
    // 支付方式统计
    getpay() {
      axios
        .post("/api/OutInventory/top5") // 根据实际后端接口地址修改
        .then((response) => {
          this.payoption.series[0].data = response.data.data.map((item) => ({
            value: item.inventoryRemove,
            name: item.name,
          }));
          this.chart = Chart.init(this.$refs.payEchart);
          this.chart.setOption(this.payoption);
        })
        .catch((error) => {
          console.error("获取出库产品数据失败", error);
        });
    },

    // 用户登录统计
    getpayNum() {
      axios
        .post("/api/loginUser/top5") // 根据实际后端接口地址修改
        .then((response) => {
          this.payNumoption.series[0].data = response.data.data.map((item) => ({
            value: item.count,
            name: item.userName,
          }));
          this.chart = Chart.init(this.$refs.payNumEchart);
          this.chart.setOption(this.payNumoption);
        })
        .catch((error) => {
          console.error("获取出库产品数据失败", error);
        });
    },
  },
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>